<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="汇总" name="first">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="hzForm"
                :model="hzForm"
                :rules="hzrules"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="网点名称">
                  <el-select
                    v-model="hzForm.networkName"
                    placeholder="请选择网点名称"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in netlist"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="集包网点">
                  <el-input
                    v-model="hzForm.contractArea"
                    placeholder="请选择集包网点"
                  >
                    <!-- <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" /> -->
                  </el-input>
                </el-form-item>
                <el-form-item label="时间范围" prop="hztime">
                  <el-date-picker
                    v-model="hzForm.hztime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="hzpicker"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="hzcx">查询</el-button>
                  <elbutton :obj="hzForm" @dj="hzclear" />
                </el-form-item>
                <el-form-item label="目的省份">
                  <el-select
                    v-model="hzForm.aimProvince"
                    placeholder="请选择目的省份"
                  >
                    <el-option
                      v-for="(item, index) in provinceOptions"
                      :key="index"
                      :label="item.province"
                      :value="item.province"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="24" class="flex-end">
            <div>
              <el-button type="primary">导出</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="hzloading"
                :data="hztableData"
                :th="hzth"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="hzForm.pageDate.pageNum"
            :page-size="hzForm.pageDate.pageSize"
            :total="hztotal"
            @size-change="mxhandleSizeChange"
            @current-change="hzhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="明细" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="mxForm"
                :model="mxForm"
                :rules="mxrules"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="包号">
                  <el-input
                    v-model="CodeString"
                    placeholder="请输入单号,以逗号形式隔开"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="网点名称">
                  <el-select
                    v-model="mxForm.networkName"
                    placeholder="请选择网点名称"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in netlist"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="集包网点">
                  <el-input
                    v-model="mxForm.contractArea"
                    placeholder="请选择集包网点"
                  >
                    <!-- <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" /> -->
                  </el-input>
                </el-form-item>
                <el-form-item label="目的省份">
                  <el-select
                    v-model="mxForm.aimProvince"
                    placeholder="请选择目的省份"
                  >
                    <el-option
                      v-for="(item, index) in provinceOptions"
                      :key="index"
                      :label="item.province"
                      :value="item.province"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="mxcx">查询</el-button>
                  <elbutton :obj="mxForm" @dj="mxclear" />
                </el-form-item>
                <el-form-item label="时间范围" prop="mxtime">
                  <el-date-picker
                    v-model="mxForm.mxtime"
                    style="width: 600px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="mxpicker"
                  />
                </el-form-item>
                <el-form-item label="差重筛选">
                  <el-select
                    v-model="mxForm.weightDiffType"
                    placeholder="请选择"
                  >
                    <el-option label="全部" value="0" />
                    <el-option label="包与包内件差重>0" value="1" />
                    <el-option label="包与包内件差重=0" value="2" />
                    <el-option label="包与包内件差重<0" value="3" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="24" class="flex-end">
            <div>
              <el-button type="primary">导出</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="mxloading"
                :data="mxtableData"
                :th="mxth"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="mxForm.pageDate.pageNum"
            :page-size="mxForm.pageDate.pageSize"
            :total="mxtotal"
            @size-change="mxhandleSizeChange"
            @current-change="mxhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { showprovinceApi, cxhzApi, cxmxApi } from '@/api/packageWeight'
import { getOutletsList } from '@/api/dashboard'
export default {
  data() {
    return {
      hzloading: false,
      mxloading: false,
      // 网点列表
      netlist: [],
      // 省份
      provinceOptions: [],
      activeName: 'first',
      //  明细部分
      mxForm: {
        aimProvince: '',
        code: [],
        contractArea: '',
        endTime: '',
        networkName: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: '',
        weightDiffType: ''
      },
      mxtotal: 0,
      // 明细表头
      mxth: [],
      //  明细表格
      mxtableData: [],
      // 汇总部分
      hzForm: {
        aimProvince: '',
        contractArea: '',
        endTime: '',
        networkName: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: ''

      },
      // 汇总表头
      hzth: [],
      //  汇总表格
      hztableData: [],
      hztotal: 0,
      // 汇总表单验证
      hzrules: {
        hztime: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      // 明细表单验证
      mxrules: {
        mxtime: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    CodeString: {
      get() {
        return this.mxForm.code.join(',')
      },
      set(value) {
        this.mxForm.code = value !== '' ? value.split(',').map(item => item.trim()) : []
      }

    }
  },
  async created() {
    this.showprovince()
    this.getnetlist()
  },
  methods: {
    async getnetlist() {
      const res = await getOutletsList()
      console.log(res)
      this.netlist = res.data
    },
    // 显示省份列表
    async showprovince() {
      const res = await showprovinceApi()
      const xcs = [{ province: '全部' }, { province: '为空' }, { province: '不为空' }]
      const cs = res.data
      this.provinceOptions = xcs.concat(cs)
      //   console.log(this.provinceOptions)
    },
    // 明细查询
    async mxonSubmit() {
      this.mxloading = true
      const res = await cxmxApi(this.mxForm)
      this.mxloading = false
      console.log('明细', res)
      if (res.data === '暂无数据') {
        this.mxth = []
        this.mxtableData = []
        this.mxtotal = 0
        return
      }
      this.mxth = res.data.fields
      this.mxtableData = res.data.list.data
      this.mxtotal = res.data.list.total
    },
    // 明细分页
    mxhandleSizeChange(value) {
      this.mxForm.pageDate.pageSize = value
      this.mxForm.pageDate.pageNum = 1
      this.mxonSubmit()
    },
    mxhandleCurrentChange(value) {
      this.mxForm.pageDate.pageNum = value
      this.mxonSubmit()
    },
    // 汇总查询
    hzcx() {
      this.$refs.hzForm.validate(valid => {
        if (valid) {
          this.hzonSubmit()
        } else {
          return false
        }
      })
    },
    // 明细查询
    mxcx() {
      this.$refs.mxForm.validate(valid => {
        if (valid) {
          this.mxonSubmit()
        } else {
          return false
        }
      })
    },
    // 汇总查询
    async hzonSubmit() {
      this.hzloading = true

      const res = await cxhzApi(this.hzForm)
      this.hzloading = false

      console.log('汇总', res)
      if (res.data === '暂无数据') {
        this.hzth = []
        this.hztableData = []
        this.hztotal = 0
        return
      }
      this.hzth = res.data.fields
      this.hztableData = res.data.list.data
      this.hztotal = res.data.list.total
    },
    // 汇总分页
    hzhandleSizeChange(value) {
      this.hzForm.pageDate.pageSize = value
      this.hzForm.pageDate.pageNum = 1
      this.hzonSubmit()
    },
    hzhandleCurrentChange(value) {
      this.hzForm.pageDate.pageNum = value
      this.hzonSubmit()
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 明细获取开始结束日期
    mxpicker(value) {
      if (value == null) {
        this.mxForm.startTime = ''
        this.mxForm.endTime = ''
        return
      }
      this.mxForm.startTime = value[0]
      this.mxForm.endTime = value[1]
    },
    // 汇总获取开始结束日期
    hzpicker(value) {
      if (value == null) {
        this.hzForm.startTime = ''
        this.hzForm.endTime = ''
        return
      }
      this.hzForm.startTime = value[0]
      this.hzForm.endTime = value[1]
    },
    // 明细重置
    mxclear(aaa) {
      this.mxForm = aaa
    },
    // 汇总重置
    hzclear(aaa) {
      this.hzForm = aaa
    }
  }

}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
